<template>
  <view class="container">
    <view class="intro">
      <text class="logo-text">{{title}}</text>
      <text class="version-text">Vue2 版本</text>
    </view>
    <view class="uni-btn-v">
      <button type="primary" @click="viewTap">Vue2 测试按钮</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue2 UniApp!'
    }
  },
  onLoad() {
    console.log('Vue2 index page onLoad')
  },
  methods: {
    viewTap() {
      console.log('Vue2 button clicked')
      uni.showToast({
        title: 'Vue2 测试成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
  font-size: 14px;
  line-height: 24px;
}

.intro {
  margin: 100px 0;
}

.logo-text {
  display: block;
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}

.version-text {
  display: block;
  font-size: 14px;
  text-align: center;
  color: #666;
}

.uni-btn-v {
  padding: 10px 0;
}
</style>
